<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="addPermissionFn(1,'0')">添加权限</el-button>
        </div>

        <el-table border :data="permissionListTree" row-key="id">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="code" label="标识" />
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.type===1" type="text" @click="addPermissionFn(2,scope.row.id)">添加</el-button>
              <el-button type="text" @click="editPermissionFn(scope.row.id)">编辑</el-button>
              <el-button type="text" @click="delPermissionFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 弹框和表单 -->
      <!-- 放置一个弹层 用来编辑新增节点 -->
      <el-dialog title="新增权限点" :visible="showDialog" @close="btnCancelFn">
        <!-- 表单 -->
        <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" style="width:90%" />
          </el-form-item>
          <el-form-item label="开启">
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="submitFn">确定</el-button>
            <el-button size="small" @click="btnCancelFn">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionListAPI, addPermissionAPI, getPermissionDetailAPI, updatePermissionAPI, delPermissionAPI } from '@/api/permission'
// 树形转化方法
import { transTree } from '@/utils/index'
export default {
  data() {
    // 名称的非重验证
    const validName = (rule, value, callback) => {
      let nameArr = []
      // 编辑和添加的校验不一样
      if (this.isEdit) {
        // 通过被点击的id找到对象
        const obj = this.permissionListFlat.find(item => item.id === this.clickedId)
        // 从所有权限点中的对象中找到pid相同的对象(排除自己)(所属哪个父权限点)
        // 找到之后,将名子拿出来
        nameArr = this.permissionListFlat.filter(item => item.pid === obj.pid && item.id !== this.clickedId).map(item => item.name)
      } else {
        // 添加-->不能和同级的名字相同
        // 1.获取被点击的下属部门(子部门的pid===点击时候的id)
        nameArr = this.permissionListFlat.filter(item => item.pid === this.clickedId).map(item => item.name)
      }

      // console.log(nameArr)

      nameArr.includes(value) ? callback(new Error(`权限点 < ${value} > 已经存在 `)) : callback()
    }
    // code的非重验证
    const validcode = (rule, value, callback) => {
      // 编辑和添加的校验一样,整个权限点中不许有任何的code重复

      // 从所有权限点中的对象中找到pid相同的对象(排除自己)(所属哪个父权限点)
      // 找到之后,将名子拿出来
      // console.log(this.permissionListFlat)
      const codeArr = this.permissionListFlat.filter(item => item.code && item.id !== this.clickedId).map(item => item.code)

      // console.log(codeArr)

      codeArr.includes(value) ? callback(new Error(`code < ${value} > 已经存在 `)) : callback()
    }
    return {
      // 权限点的树形结构
      permissionListTree: [],

      // 权限点的平面结构
      permissionListFlat: [],

      // 控制弹窗展示
      showDialog: false,

      // 表单内容
      formData: {
        enVisible: '',
        name: '',
        code: '',
        description: '', // 描述
        type: '', // 是不是页面级别的权限点是 1 否 2
        pid: '' // 属于哪个权限点,最上层权限点为0
      },

      // 表单验证规则
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' },
          { validator: validName, trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' },
          { validator: validcode, trigger: 'blur' }]
      },

      // 编辑/新增状态
      isEdit: false,

      // 保留被点击的权限点的ID
      clickedId: ''
    }
  },
  created() {
    // 获取所有权限点(树形结构)
    this.getPermissionListFn()
  },
  methods: {
    // 获取全部权限点
    async getPermissionListFn() {
      const res = await getPermissionListAPI()
      // console.log(res)
      // 保留平面的全部权限点
      this.permissionListFlat = res.data
      // 保留转成树形的全部权限点
      this.permissionListTree = transTree(res.data, '0')
      // console.log(this.permissionListTree)
    },

    // 新增权限点
    // type指能不能看某些页面
    // clickedId指被点击的权限点的id,也拿来用做次级权限点的pid
    addPermissionFn(type, clickedId) {
      // 保留被点击的id
      this.clickedId = clickedId
      // 关闭编辑状态
      this.isEdit = false
      // 展示弹窗
      this.showDialog = true
      // 保存type
      this.formData.type = type
      // 被点击的权限点即为要添加的新权限点的pid
      this.formData.pid = clickedId

      // console.log(type)
      // console.log(res)
    },

    // 编辑权限点
    // 被编辑的权限点的id
    async editPermissionFn(id) {
      // 保留被点击的id
      this.clickedId = id
      // 打开编辑状态
      this.isEdit = true
      // 打开弹窗表单
      this.showDialog = true
      // 数据回写
      const res = await getPermissionDetailAPI(id)
      this.formData = res.data
      // 再this.formData数据包里添加id
      this.formData.id = id
    },

    // 删除权限点
    // 要被删除的权限点的id
    async delPermissionFn(id) {
      // 发送删除权限点的api
      const res = await delPermissionAPI(id)
      // 判断请求是否成功
      if (res.success) {
        // 给个成功提示
        this.$message.success(res.message)
        // 刷新页面
        this.getPermissionListFn()
      }
    },

    // 弹窗-确定按钮
    async submitFn() {
      // console.log(this.formData)
      // 判断 编辑/新增 状态,调用不同API
      let res
      if (this.isEdit) {
        // 编辑状态
        res = await updatePermissionAPI(this.formData)
      } else {
        // 新增状态
        res = await addPermissionAPI(this.formData)
      }
      // console.log(res)

      // 判断请求是否成功
      if (res.success) {
        // 给个成功提示
        this.$message.success(res.message)
        // 清空表单
        this.$refs.perForm.resetFields()
        // 关闭表单
        this.showDialog = false
        // 刷新页面
        this.getPermissionListFn()
      }
    },

    // 弹窗-取消按钮
    btnCancelFn() {
      // 清空表单
      this.$refs.perForm.resetFields()
      // 关闭表单
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
